import React from 'react';
import { MOBILE_REG } from 'utils/consts';
import { Link } from 'react-router-dom';
import {
  Form,
  Input,
  Button,
} from 'antd';
import LogoHeader from '../../../components/Header/LogoHeader';

import styles from './index.module.less';

const FormItem = Form.Item;

class SetPassword extends React.Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  handleConfirmBlur = e => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }

  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }

  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields([ 'confirm' ], { force: true });
    }
    callback();
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    const rightContent = (
      <div className={ styles.menuBox }>
        <Link className={ styles.menuItem } to='/'>首页</Link>
        <Link className={ styles.menuItem } to='/login'>登录</Link>
        <Link className={ styles.menuItem } to='/register'>注册</Link>
        <Link className={ styles.menuItem } to='/'>帮助中心</Link>
      </div>
    );

    return (
      <React.Fragment>
        <LogoHeader rightContent={ rightContent } />
        <div className={ styles.content }>
          <div className={ styles.box }>
            {/* <div className={ styles.text1 }><Link to="/">选择其他验证方式></Link></div> */}
            <div className={ styles.text2 }>设置新密码</div>
            <div className={ styles.contentBox }>
              <Form onSubmit={ this.handleSubmit }>
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [{
                      required: true, message: 'Please input your password!',
                    }, {
                      validator: this.validateToNextPassword,
                    }],
                  })(
                    <Input type="password" placeholder='设置你的登录密码' style={{ width: '301px', height: '40px' }}/>
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('confirm', {
                    rules: [{
                      required: true, message: 'Please confirm your password!',
                    }, {
                      validator: this.compareToFirstPassword,
                    }],
                  })(
                    <Input type="password" onBlur={this.handleConfirmBlur} placeholder='请再次输入你的密码' style={{ width: '301px', height: '40px' }}/>
                  )}
                </FormItem>
                <FormItem>
                  <Button type="primary" htmlType="submit" className={styles.verBtn} style={{ width: '301px', height: '40px' }}>验证</Button>
                </FormItem>
              </Form>
            </div>
            <div className={ styles.text3 }>
              <span className={styles.s1}>遇到麻烦？</span>
              <span>请致电客服协助您400-681-6018(周一至周日 9:30-17:00)</span>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Form.create()(SetPassword);
